<template>
    <v-app>
        <v-snackbar
                timeout="3000"
                v-model="bar"
        >
            你还没有评论！
            <template v-slot:action="{ attrs }">
                <v-btn
                        color="pink"
                        text
                        v-bind="attrs"
                        @click="bar = false"
                >
                    Close
                </v-btn>
            </template>
        </v-snackbar>

        <center>
            <strong style="margin-top: 10px; font-size: xx-large;color: dodgerblue">留 言 板</strong>
            <br/>
        </center>
        <div v-if="!isLogin">
            <br/>
            <center>
                <v-alert
                        text
                        width="300px"
                        color="blue"
                        type="info"
                >登录以使用更多功能</v-alert>
                <br/>
                <v-btn outlined target="_blank" color="primary" href="/login"> 登 录 <v-icon small>mdi-login</v-icon> </v-btn>
                <v-btn outlined target="_blank" color="primary" href="/sign" style="margin-left: 20px"> 注 册 <v-icon small>mdi-account-plus-outline</v-icon> </v-btn>
            </center>
        </div>
        <div v-if="isLogin">
            <br/>
            <center>
                <div style="width: 85%">
                    <div>
                        <v-textarea
                                outlined
                                label="输入留言..."
                                v-model="msg.text"
                        ></v-textarea>
                        <v-row style="margin-right: 20px; margin-left: 20px">
                            <span>文明评论</span>
                            <v-spacer></v-spacer>
                            <v-btn color="info" depressed>
                                <span style="font-size: medium" @click="doMsg">发 送</span>
                            </v-btn>
                        </v-row>
                    </div>
                </div>
            </center>
            <br/>
            <div v-for="i in msgs.list" :key="i.content.id" style="margin-left: 5%;width: 90%">
                <v-divider></v-divider>
                <div style="margin: 10px">
                    <c-cmt :data="i"></c-cmt>
                    <a style="color: gray;text-decoration: none;font-size: small" @click="reply(i)">回复</a>
                    <div v-for="o in repls" :key="o.content.id" v-if="o.content.belong==i.content.id" style="margin-left: 25px">
                        <c-repl :data="o"></c-repl>
                        <a style="color: gray;text-decoration: none;font-size: small" @click="subReply(i, o)">回复</a>
                    </div>
                    <div v-if="repl.belong==i.content.id">
                        <v-textarea
                                dense
                                outlined
                                :label="'@'+tname"
                                v-model="repl.text"
                        ></v-textarea>
                        <v-row style="margin-right: 20px; margin-left: 20px">
                            <span>文明评论</span>
                            <v-spacer></v-spacer>
                            <v-btn color="error" depressed tile @click="cancelRepl">
                                <span style="font-size: medium">取消</span>
                            </v-btn>
                            <v-btn color="primary" depressed tile style="margin-left: 10px" @click="doRepl">
                                <span style="font-size: medium">发 送</span>
                            </v-btn>
                        </v-row>
                        <br/>
                    </div>
                </div>
            </div>
            <v-divider style="margin-left: 5%;width: 90%"></v-divider>
            <br/>
            <div class="text-center">
                <v-pagination
                        @input="getData(page)"
                        v-model="page"
                        :length="msgs.totalPages"
                        circle
                ></v-pagination>
            </div>
            <br/>
        </div>

    </v-app>
</template>

<script>
    export default {
        name: "Msg",
        data(){
            return{
                msgs: [],
                page: 1,

                bar: false,
                msg: {
                    text: '',
                },
                repls: [],

                tname: '',
                repl: {
                    text: '',
                    belong: -1,
                    tid: -1,
                    aid: 0,
                },

                isLogin: false,
            }
        },
        created() {
            const t = this;
            this.getUser().then(function (resp) {
                if (resp.data!=''){
                    t.isLogin = true;
                }
            })
            this.getData(1);
        },
        methods:{
            cancelRepl(){
                this.repl.belong=-1
                this.repl.tid=-1;
                this.repl.text='';
                this.tname = '';
            },
            doRepl(){
                const t = this;
                if (t.repl.text.match(/^\s*$/)) {
                    t.bar = true;
                    return;
                }
                this.sendRepl(t.repl).then(function () {
                    t.cancelRepl();
                    t.getData(t.page);
                })
            },
            getData(page){
                const t = this;
                t.page = page;
                this.getMsg(t.page).then(function (resp) {
                    t.msgs = resp.data;
                })
                this.getReply(0).then(function (resp) {
                    t.repls = resp.data;
                })
                scrollTo(0,0);
            },
            doMsg(){
                const t = this;
                if (t.msg.text.match(/^\s*$/)) {
                    t.bar = true;
                    return;
                }
                this.sendMsg(t.msg).then(function () {
                    t.msg.text = '';
                    t.getData(1);
                })
            },
            reply(i){
                this.tname = i.u.name;
                i = i.content;
                this.repl.belong=i.id
                this.repl.tid=i.uid;
            },
            subReply(i, o){
                this.tname = o.uu.name;
                i = i.content;
                o = o.content;
                this.repl.belong=i.id;
                this.repl.tid=o.uid;
            }
        },
    }
</script>

<style scoped>

</style>